<template>
  <div class="momentsPermission">
    <p class="momentsPermission-label">朋友圈权限</p>
    <ul class="momentsPermission-setup">
      <li class="momentsPermission-setup__item">
        <span class="momentsPermission-setup__icon">
          <SvgIcon popper-class="moments-icon" icon-class="moments" />
          <SvgIcon popper-class="moments-icon__locked" icon-class="lockClose" />
        </span>
        <span>不让对方看</span>
        <el-switch
          class="switch"
          :disabled="disabled"
          v-model="permission.disabledOtherLook"
        ></el-switch>
      </li>
      <li class="momentsPermission-setup__item">
        <span class="momentsPermission-setup__icon">
          <SvgIcon popper-class="moments-icon" icon-class="moments" />
          <SvgIcon popper-class="moments-icon__locked" icon-class="eyeOff" />
        </span>
        <span>不看对方</span>
        <el-switch
          class="switch"
          :disabled="disabled"
          v-model="permission.disabledSelfLook"
        ></el-switch>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    modelValue: Permission;
  }>(),
  {
    disabled: false,
  }
);

const emits = defineEmits<{
  (e: "update:modelValue", permission: Permission): void;
}>();

const permission = ref<Permission>({
  // 是否允许别人看自己的动态
  disabledOtherLook: props.modelValue.disabledOtherLook,
  // 是否允许自己看别人的动态
  disabledSelfLook: props.modelValue.disabledSelfLook,
});

watch(
  () => props.modelValue,
  (value: Permission) => {
    permission.value.disabledOtherLook = value.disabledOtherLook;
    permission.value.disabledSelfLook = value.disabledSelfLook;
  },
  {
    deep: true,
  }
);

watch(
  () => permission.value,
  (value: Permission) =>
    emits("update:modelValue", {
      disabledOtherLook: value.disabledOtherLook,
      disabledSelfLook: value.disabledSelfLook,
    }),
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.momentsPermission {
  margin-top: 10px;
  color: #606266;
  font-size: 14px;

  &-label {
    margin: 0 0 12px;
  }

  &-setup {
    position: relative;

    &::before {
      content: "";
      width: 88%;
      border-top: 1px solid #e2e5e6;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }

    &__item {
      padding: 10px 15px;
      background-color: #f6f9fa;
      position: relative;

      .switch {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
      }
    }

    &__icon {
      position: relative;
      margin-right: 15px;
      vertical-align: middle;

      .moments-icon {
        font-size: 22px;
        opacity: 0.6;

        &__locked {
          font-size: 15px;
          position: absolute;
          opacity: 0.9;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
}
</style>
